<template>
	<div>
		<div class="header">
			<h3>用户登录<router-link to="/">返回首页</router-link><span class="shu">|</span><router-link to="/Entry">帮助中心</router-link></h3>

		</div>
		<div class="content">
			<div class="login">
				<h3>账号登录</h3>
				<p class="username"><input type="text" v-model="names" placeholder="用户名/邮箱/手机号" @blur="judgename()"  ref="names"></input></p>
				<p class="name"></p>
				<p class="passwords"><input type="password" placeholder="密码" ref="passwords" v-model="passwords" /></p>
				<p class="name1"></p>
				<p class="remember"><label><input type="checkbox" v-model="remember" @click="alocked()" style="vertical-align:middle;"/>记住用户</label> </p>
				<p class="entry"><button class="submit" @click="SignIn()">登录</button></p>
				<p class="other"><router-link to="/Login">立即注册</router-link><router-link to="/Forget">忘记密码</router-link></p>
			</div>

		</div>

		<Footers></Footers>
	</div>
</template>

<script>
import Footers from'@/components/Footers'

	export default{
		data(){
			return{
				names: '',
				passwords:'',
				remember:'',
				nameO:'flase'
			}
		},
		 created: function () {
               var usename = localStorage.getItem("usename");

               var remembers = localStorage.getItem("remembers");
               if(remembers){
               		this.names=usename
               		this.remember=remembers
               }

       // 主页添加键盘事件,注意,不能直接在焦点事件上添加回车
       var lett=this;
       document.onkeydown=function(e){
         var key=window.event.keyCode;
         if(key==13){
           lett.SignIn();
         }
       }

          },
          components:{
		      Footers,

		    },
		methods: {
      login12(){
        alert('dsb')
      },
      setCookie: function (cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        console.info(cname + "=" + cvalue + "; " + expires);
        document.cookie = cname + "=" + cvalue + "; " + expires;
        console.info(document.cookie);
      },
      //获取cookie
      getCookie: function (cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') c = c.substring(1);
          if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
        }
        return "";
      },
      //清除cookie
      clearCookie: function () {
        this.setCookie("username", "", -1);

      },
		  judgename:function(){
		  		 var Expression = /^[0-9a-zA-Z_]{4,24}$/ ;
				 var objExp=new RegExp(Expression);
				 if(objExp.test(this.$refs.names.value)==true){
					$(".name").text("")
		        	this.nameO="true"
		        }else{
//		        	$(".name").text("用户名格式不正确")
//		        	$(".name").css("color","red")
		        	this.nameO="flase"
		        }
		        this.alocked()
		  },
		  SignIn:function(){
		  	 var userName=this.names
		  	 var password=this.passwords
//		  	 console.log(userName,password)
		  	  var that = this
					  $.ajax({
                        type:'get',
		                    url: local+'/awm/user/login',
		                    data:{'userName':userName,'password':password},
		                    datatype: "json",
		                    withCredentials: true,
		                    contentType: "application/json",
		                    success: function(data) {
//		                       console.log(data)
//		                       console.log(data.flag)
		                       if(data.resultData.flag==0){
                             that.$message.error({
                               message: '用户名不可用',
                               type: 'warning',
                               duration:800
                             });

		                       }else if(data.resultData.flag==2){
                             that.$message.error({
                               message: '密码错误',
                               type: 'warning',
                               duration:800
                             });
		                       }else if(data.resultData.flag==1){
		                         console.log(data)
		                       		    sessionStorage.setItem('login',true)
		                              sessionStorage.setItem('userName',data.resultData.user.userName)
		                              sessionStorage.setItem('userId',data.resultData.user.id)
                                  that.setCookie('login',true,30)

                                if (that.$route.query.redirect) {
                                  that.$router.push({
                                    path: that.$route.query.redirect,

                                  })
                                } else {
                                    that.$router.push({
                                      name: 'test',
                                      params: {
                                        userName: userName
                                      }
                                    })
                                }

//							          that.$router.push({
//					                        name: 'Home',
//					                        params: {
//					                            userName: userName
//					                        }
//					                       // query: {
//					                       //     userName: userName
//					                       // }
//				                      })
		                       }
		                    },
		                    error: function(data) {

		                    }

		                })
		  },
		  alocked:function(){
//		       console.log(this.remember)
		       if(this.remember){
		       		localStorage.setItem("usename", this.$refs.names.value);

		       		localStorage.setItem("remembers", this.remember);
		       }else{
		       		localStorage.removeItem("usename")
		       		localStorage.removeItem("remembers");
		       }
		  }



		}
	}
</script>

<style scoped>

.header{
	width:1060px;
	height:120px;
	margin:0 auto;
	background:url(../assets/logobig.png) no-repeat 8px;
}
.header h3{
	height:120px;
	line-height:120px;
	font-size:21px;
	text-align: left;
	margin-left:220px;
}
.header h3 a:nth-child(1){
	display:inline-block;
	font-size:14px;
	text-indent:570px;
	width:640px;
	font-weight:100;
	color:#333;

}
.header h3 span{
	font-size:16px;
	font-weight:100;
	color:#b5b5b5;
}
.header h3 a:nth-child(3){
	display:inline-block;
	font-size:14px;
	text-indent:14px;
	width:70px;
	font-weight:100;
	color:#333;

}
.content{
	height:660px;
	text-align: left;
	width:100%;
	background:url(../assets/bg5ss.png) no-repeat;
	position: relative;
  margin-bottom: 60px;
}
.content .login{
	height:300px;

	width:282px;
	background:#fff;
	position: absolute;
	padding:10px;
	left:833px;
	top:130px;


}
.login h3{
	height:48px;
	font-size:20px;

}
.username{
	height:36px;
	width:282px;
}
.username input{
	height:34px;
	width:280px;
	border:1px solid #aaa;
	text-indent:5px;
	background:#fff;
}
.name{
	height:40px;
	width:100%;
}
.name1{
	color:red;
}
.passwords{
	height:36px;
	width:282px;
}
.passwords input{
	height:34px;
	width:280px;
	border:1px solid #aaa;
	text-indent:5px;
	background:#fff;
}
.remember{
	height:30px;
	margin-top:10px;
	font-size:11px;
}

.remember input{
	background:#fff;
	margin-right:14px;

}
.entry{
	height:35px;
	margin-bottom:20px;
}
.entry button{
	height:35px;
	width:100%;
	color:#fff;
	background:#ff8328;
	border:none;
}
.other{
	height:10px;
	width:100%;

}
.other a:nth-child(1){
	height:10px;
	display:inline-block;
	width:50px;
	font-size:10px;
	color:#7c7d7d;

}
.other a:nth-child(2){
	height:10px;
	width:50px;
	font-size:10px;
	color:#7c7d7d;
	display:inline-block;
	margin-left:180px;

}
.list{
	height:182px;
	margin:0 auto;
	width:1060px;
	overflow: auto; zoom: 1;

}
.list li{
	float:left;
	height:182px;
	width:163px;
	background:red;
	text-align:right;
	line-height:270px;

}
.list li:nth-child(1){
	background:url(../assets/three.png) no-repeat 101px 42px;
}
.list li:nth-child(2){
	background:url(../assets/four.png) no-repeat 101px 42px;

}
.list li:nth-child(3){
	background:url(../assets/five.png) no-repeat 101px 42px;

}
.list li:nth-child(4){
	background:url(../assets/six.png) no-repeat 101px 42px;

}
.list li:nth-child(5){
	background:url(../assets/two.png) no-repeat 101px 42px;

}
.list li:nth-child(6){
	background:url(../assets/one.png) no-repeat 101px 42px;

}

</style>
